<template>
  <div class="container">
    <div class="header">
      <van-icon class="header-left" size="30" @click="goback" name="arrow-left" />
      填写服务订单
    </div>
    <Progress item="0" />
    <van-cell class="cell">
      <template #title>
        <van-image width="25" height="25" :src="createInfo.service.serviceImg" />
        <span class="server-name">{{ createInfo.service.serviceName }}</span>
      </template>
      <template #default>
        <div class="service-text">服务内容</div>
      </template>
    </van-cell>
    <van-cell-group class="cell" title="必填项">
      <van-cell>
        <template #title>就诊医院</template>
        <template #default>
          <div @click="showHospital = true">{{ form.hospital_name || '请选择就诊医院' }}
            <van-icon name="arrow" />
          </div>
        </template>
      </van-cell>
      <van-cell>
        <template #title>就诊日期</template>
        <template #default>
          <div @click="showDate = true">{{ currentDate || '请选择就诊日期' }}
            <van-icon name="arrow" />
          </div>
        </template>
      </van-cell>
      <van-cell>
        <template #title>陪诊师</template>
        <template #default>
          <div @click="showCompanion = true">{{ companionName || '请选择陪诊师' }}
            <van-icon name="arrow" />
          </div>
        </template>
      </van-cell>
      <van-cell>
        <template #title>接送地址</template>
        <template #default>
          <van-field class="text" input-align="right" v-model="form.receiveAddress" placeholder="请输入接送地址" />
        </template>
      </van-cell>
      <van-cell>
        <template #title>联系电话</template>
        <template #default>
          <van-field class="text" input-align="right" v-model="form.tel" placeholder="请输入联系电话" />
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell-group class="cell" title="服务需求">
      <van-field class="text" style="height: 100px;" v-model="form.demand" placeholder="请简单描述您要就诊的科室" />
    </van-cell-group>
    <van-button class="submit" @click="submit" type="primary" size="large">提交订单</van-button>
    <van-popup v-model:show="showHospital" position="bottom" :style="{ height: '30%' }">
      <van-picker :columns="hospitalColumns" @confirm="onHospitalConfirm" @cancel="showHospital = false" />
    </van-popup>
    <van-popup v-model:show="showDate" position="bottom" :style="{ height: '30%' }">
      <van-date-picker title="选择日期" :min-date="new Date()" @confirm="onDateConfirm" @cancel="showDate = false" />
    </van-popup>
    <van-popup v-model:show="showCompanion" position="bottom" :style="{ height: '30%' }">
      <van-picker :columns="companionColumns" @confirm="onCompanionConfirm" @cancel="showCompanion = false" />
    </van-popup>
    <!-- 二维码弹窗 -->
    <van-dialog v-model:show="showPay" :show-confirm-button="false" >
      <!--  -->
      <van-icon class="close" name="cross" @click="onClosePay" />
      <div>微信支付</div>
      <van-image width="100" height="100" :src="payurl" />
    </van-dialog>

  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted, computed } from "vue";
import { useRouter } from 'vue-router'
import Progress from '../../components/Progress.vue';
import Qrcode from 'qrcode'

const showHospital = ref(false);
const showDate = ref(false);
const showCompanion = ref(false);
const showPay = ref(false);
const payurl = ref('')


const { proxy } = getCurrentInstance();
const router = useRouter()
const currentDate = ref('')
const companionName = ref('')


const createInfo = reactive({
  companion: [],
  hospitals: [],
  service: {}
})
const goback = () => {
  router.go(-1)
}
const hospitalColumns = computed(() => {
  return createInfo.hospitals.map(item => {
    return {
      text: item.name,
      value: item.id
    }
  })
})
const companionColumns = computed(() => {
  return createInfo.companion.map(item => {
    return {
      text: item.name,
      value: item.id
    }
  })
})

const form = reactive({
  // 这里不需要写每一项的默认值，因为在选择时会更新
})
const onHospitalConfirm = (item) => {
  form.hospital_id = item.selectedOptions[0].value
  form.hospital_name = item.selectedOptions[0].text
  showHospital.value = false;
  console.log(form)
}
const onDateConfirm = (item) => {
  currentDate.value = item.selectedOptions.map(arr => arr.value).join('-')
  form.starttime = new Date(currentDate.value).getTime()
  showDate.value = false;
  console.log(form)
}
const onCompanionConfirm = (item) => {
  form.companion_id = item.selectedOptions[0].value
  companionName.value = item.selectedOptions[0].text
  showCompanion.value = false;
  console.log(form)
}

onMounted(async () => {
  const { data } = await proxy.$api.h5Companion()
  Object.assign(createInfo, data.data)
  console.log(createInfo)
})

// 表单提交
const submit = async () => {
  // 这里注意params的每一项要加引号，数组中存储的是字符串形式的键名（如 'hospital_id', 'hospital_name' 等），这样在 for 循环中使用 form[field] 时可以正确访问到 form 对象中的对应属性
  const params = [
    "hospital_id",
    "hospital_name",
    "demand",
    "companion_id",
    "receiveAddress",
    "tel",
    "starttime"
  ]
  for (const i of params) {
    if (!form[i]) {
      showNotify({ message: `请填写全部内容` })
      return
    }
  }

  const { data: orderRes } = await proxy.$api.createOrder(form)
  showPay.value = true;
  // payurl.value = Qrcode.toDataURL(orderRes.data.wx_code) 这样写是错误的因为这个方法也是异步的
  Qrcode.toDataURL(orderRes.data.wx_code).then( url => {
    console.log(url)
    showPay.value = true;
    payurl.value = url
  }).catch(err => {
    console.log(err)
  })
}

const onClosePay = () => {
  showPay.value = false;
  router.push('/order')
}
</script>

<style lang="less" scoped>
.container {
  background-color: #f0f0f0;
  height: 100vh;
}

.header {
  padding: 10px 0;
  text-align: center;
  line-height: 30px;
  font-size: 15px;

  .header-left {
    float: left;
  }
}

.cell {
  width: 95%;
  margin: 5px auto;
  background-color: #fff;

  ::v-deep(.van-field__control) {
    color: var(--van-cell-value-color);
  }

  ::v-deep(.van-cell__title) {
    display: flex;
    align-items: center;
  }

  .server-name {
    margin-left: 10px;
  }
}

.service-text {
  background: url() no-repeat center center;
  background-size: 20px;
}

.submit {
  position: absolute;
  bottom: 0;
}

::v-deep(.van-dialog__content) {
  text-align: center;
  padding: 20px;

  .close {
    position: absolute;
    left: 20px;
  }
}
</style>